<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>注册</title>
  <style>
    body { font-family: Arial, sans-serif; }
    .container { width: 300px; margin: 100px auto; }
    input, button { width: 100%; margin: 8px 0; padding: 8px; }
    .message { color: red; }
  </style>
</head>
<body>
  <div class="container">
    <h2>注册</h2>
    <form id="registerForm">
      <input id="username" placeholder="用户名" required><br>
      <input id="password" type="password" placeholder="密码" required><br>
      <button type="submit">注册</button>
    </form>
    <p class="message" id="message"></p>
  </div>
  <script>
    document.getElementById('registerForm').onsubmit = function(e) {
      e.preventDefault();
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      fetch('/api/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
      })
      .then(res => res.text())
      .then(msg => {
        if (msg === '注册成功') {
          window.location.href = '/login.html';
        } else {
          document.getElementById('message').innerText = '该用户名已注册';
        }
      });
    }
  </script>
</body>
</html>